<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        ul {
            display: flex;
            /* width: 210px;
            flex-wrap: wrap; */
        }

        li {
            list-style: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #985568;
            color: #562358;
            text-align: center;
            line-height: 50px;
            margin: 10px;
        }
        /* 进入 enter 退出 移动 move */
        .list-enter-from{
            transition: translateY(-100px);
            opacity: 0;
}
        .list-move{
            transition:all 0.5s;
        }
        
        .list-enter-active,.list-leave-active{
            transition: all .5s;
        }
        .list-leave-to{
            transform: rotate(360deg);
            opacity: 0;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <button @click="order(1)">升序</button>
        <button @click="order(2)">降序</button>
        <button @click="order(0)">乱序</button>
        <button @click="add(1)">添加到第一个</button>
        <button @click="add(2)">添加到末尾</button>
        <button @click="list.shift()">删除第一个</button>
        <button @click="list.pop()">删除最后一个</button>
        <button @click="list.splice(2,1)">删除第三个数字</button>
        <button @click="list.splice(list.length-3,1)">删除倒数第三个数字</button>
        <button @click="list.splice(1,4)">删除第2-5个数字</button>
        <button @click="list.splice(3,0,999)">添加到第三个后面</button>
        <button @click="list.splice(list.length-1,0,999)">加到倒数第二个</button>
        <ul>
            <li v-for="i in list">{{i}}</li>
        </ul>
        <transition-group name="list" tag="ul">
            <li v-for="i , index" @dblclick="list.splice(index,1)" :key="i">{{i}}</li>
        </transition-group>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    list: [1, 2, 3, 4, 5, 6, 7, 8,9]
                }
            }, methods: {
                order(type) {
                    if (type == 1) {
                        this.list.sort((a, b) => a - b)//升序，
                    } else if (type == 2) {
                        this.list.sort((a, b) => b - a)//降序
                    } else {
                        //乱序
                        this.list.sort(() => Math.random() - 0.5)
                    }
                },
                add(type){
                    let i=this.list.length+1
                    if(type==1){
                        this.list.unshift(i)
                    }else{
                        this.list.push(i)
                    }
                }
            }
        }
        ).mount('#app')
    </script>
</body>

</html>